<script lang="ts" setup>
// import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import { RouterEnums } from "@/types";
import { ActivityAxios, HomeAxios } from "@/api";
import { onMounted, reactive } from "vue";
import { useI18n } from "vue-i18n";
import { MessageStore } from "@/store";
import { ref } from "vue";
import moment from "moment";
import { CountDown } from "vant";
import { UserStore } from "@/store";
const { t } = useI18n();
const router = useRouter();
const messageStore = MessageStore();
const userStore = UserStore();
const gotoPage = type => {
  //vip活动1，救济金活动2，宝箱奖励活动3，代理返现活动5，无限代理活动6， 等级活动7 ，红包雨活动9，全局自助打码10",超级会员日活动11
  if (type === 1) {
    router.push(RouterEnums.ACTVIP);
  } else if (type === 2) {
    router.push(RouterEnums.ACTRELIEF);
  } else if (type === 3) {
    router.push(RouterEnums.TREASUREChEST);
  } else if (type === 5) {
    router.push(RouterEnums.DISTRIAGENT);
  } else if (type === 6) {
    router.push(RouterEnums.DISTRIAGENT);
  } else if (type === 7) {
    router.push(RouterEnums.LEVELREWARDSPAGE);
  } else if (type === 9) {
    router.push(RouterEnums.HOME);
    localStorage.removeItem("openSidebar");
    messageStore.setOpenCashRainStatus();
  } else if (type === 10) {
    router.push(RouterEnums.WEBSITEREBATES);
  } else if (type === 11) {
    router.push(RouterEnums.SIPERMEMBERDAY);
  }
};
const actList: any = reactive({ list: [] });
onMounted(async () => {
  //活动列表
  getActList();
  if (userStore.isLogin) {
    await getAllGameActRewardNum();
  }
});
//活动列表
const getActList = () => {
  ActivityAxios.getActivityList().then(res => {
    actList.list = res.list;
  });
};

//解析字符串
const countDownType: any = ref(0);
function convertToMilliseconds(date) {
  // 尝试将时间字符串解析为 moment 对象
  const time = moment(date, "HH:mm:ss", true);
  // 检查解析是否成功
  if (time.isValid()) {
    // 将时间转换为毫秒
    const hours = time.hours();
    const minutes = time.minutes();
    const seconds = time.seconds();
    const milliseconds = (hours * 3600 + minutes * 60 + seconds) * 1000;
    countDownType.value = 1;

    return Number(milliseconds);
  } else {
    countDownType.value = 0;
    return date;
  }
}
//获取活动的角标
const actRewardNum: any = ref([]);
const getAllGameActRewardNum = async () => {
  await HomeAxios.getAllGameActRewardNum().then(res => {
    actRewardNum.value = res.list;
    actList.list = actList.list.map(item => {
      let match: any = {
        total: 0,
      };
      if (actRewardNum.value.length > 0) {
        match = actRewardNum.value.find((msgItem: any) => msgItem.actType === item.actType);
      }
      return {
        ...item,
        total: match ? match.total : 0,
      };
    });
    // promotionTotal.value = listImg.value.list
    //   .slice(9)
    //   .reduce((total, item) => total + item.total, 0);
  });
};
</script>
<template>
  <div class="frame-div">
    <!-- 活动列表 -->
    <div class="act-list-frame">
      <div
        v-for="(item, index) in actList.list"
        :key="index"
        class="act-card-frame"
        @click="gotoPage(item.actType)"
      >
        <div class="dard-top-frame df ai-center jc-space-between">
          <div class="df ai-center left-frame">
            <img class="act-logo" :src="item.customIcon" />
            <!-- item.name 如果为时间格式 则保持不变 -->

            <div class="act-name" v-if="item.actType !== 9">
              <!-- {{ item.actType == 9 ? item.name : t(`interface.${item.name}`) }} -->
              {{ t(`interface.${item.name}`) }}
            </div>
            <div class="act-name" v-if="item.actType === 9">
              <!-- {{ item.actType == 9 ? item.name : t(`interface.${item.name}`) }} -->
              <div v-if="countDownType == 1">
                <CountDown
                  ref="countTimeRef"
                  :time="convertToMilliseconds(item.name)"
                  format="HH:mm:ss"
                />
              </div>
              <div v-else>
                {{ t("activity.actNameList.started") }}
              </div>
            </div>

            <div class="red-point df ai-center jc-center" v-if="item.total > 0">
              {{ item.total }}
            </div>
          </div>
          <img class="detalhe-frame" src="@/image/new_img/activity/homev2_detail_enable.png" />
        </div>
        <img class="publicize-frame" :src="item.banner" />
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.frame-div {
  width: 100%;
  height: 100%;
  background-image: url(@/image/new_img/main_bg_2.png);
  background-size: cover;
  background-repeat: repeat;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: scroll;
}

.frame-div::-webkit-scrollbar {
  display: none;
}

.act-list-frame {
  width: calc(100% - 46px);
  height: auto;
  margin-left: 28px;
}

.act-card-frame {
  // background-image: url(@/image/new_img/activity/homev2_actlist_bg.png);
  background-size: 100% 100%;
  object-fit: cover;
  width: 100%;
  height: 298px;
  margin-bottom: 20px;
  padding-bottom: 1px;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.interval-frame {
  width: 100%;
  height: 87px;
}

.dard-top-frame {
  width: calc(100% - 36px);
  height: 100px;
  margin-left: 18px;
}

.left-frame {
  width: 100%;
  height: 100%;
}

.act-logo {
  width: 66px;
  height: 66px;
}

.act-name {
  font-size: 28px;
  color: #fff;
  justify-content: flex-start;
  margin-left: 10px;
}

.detalhe-frame {
  width: 132px;
  height: 50px;
}

.publicize-frame {
  width: 662px;
  height: auto;
  margin-left: 20px;
  border-radius: 15px;
  margin-top: 4px;
  object-fit: cover;
}
:deep(.van-count-down) {
  color: #ffffff;
  line-height: 28px;
  font-weight: 400;
  font-size: 28px;
}
.red-point {
  background: #fe7919;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #ffffff;
  color: #ffffff;
  margin-left: 10px;
  font-size: 18px;
}
</style>
